<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>角色管理</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/lib/ace/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/lib/ace/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

        <!-- easyui -->
        <link rel="stylesheet" href="/lib/easyui/themes/default/easyui.css">

		<!-- text fonts -->
		<link rel="stylesheet" href="/lib/ace/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
        <link rel="stylesheet" href="/lib/ace/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/lib/ace/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/lib/ace/css/ace-skins.min.css" />
		<link rel="stylesheet" href="/lib/ace/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/lib/ace/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/lib/ace/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/lib/ace/js/html5shiv.min.js"></script>
		<script src="/lib/ace/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>

        <div class="main-container ace-save-state" id="app">
            <div class="main-content">
                <div class="main-content-inner">
                    <div class="page-content">
                        <div class="row" style="margin: 20px 10px 20px 20px">
                            <div class="col-md-4 col-md-border">
                                <div class="table-header">
                                    <div style="font-size: 18px">
                                        权限模块列表 &nbsp;&nbsp;
                                        <a href="javascript:;" data-toggle="modal" data-target="#addAclModuleForm">
                                            <span class="glyphicon glyphicon-plus-sign" style="font-size: 16px; color:salmon"></span>
                                        </a>
                                    </div> 
                                </div>
                                <div class="space-3"></div>
                                <div id="aclModuleList"></div>
                            </div>
                            <div class="col-md-8 col-md-border">
                                <div class="table-header">
                                    <div style="font-size: 18px">
                                        权限点列表 &nbsp;&nbsp;
                                        <a href="javascript:;" data-toggle="modal" data-target="#addAclForm">
                                            <span class="glyphicon glyphicon-plus-sign" style="font-size: 16px; color:salmon"></span>
                                        </a>
                                    </div> 
                                </div>

                                <div>
                                    <table id="simple-table" class="table  table-bordered table-hover">
                                        <thead>
                                            <tr >
                                                <th>权限名称</th>
                                                <th>权限模块</th>
                                                <th>类型</th>
                                                <th>URL</th>
                                                <th>状态</th>
                                                <th>顺序</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr v-for="(item ,i) in list" :key="item.id">
                                                <td v-cloak>{{item.name}}</td>
                                                <td v-cloak>{{item.aclModule.name}}</td>
                                                <td v-cloak>{{item.type | typeFormat}}</td>
                                                <td v-cloak>{{item.url}}</td>
                                                <td v-cloak>{{item.status | statusFormat}}</td>
                                                <td v-cloak>{{item.seq}}</td>
                                                <td>
                                                    <div class="hidden-sm hidden-xs btn-group">
                                                        <button class="btn btn-xs btn-info" data-toggle="modal" data-target="#modifyAclForm">
                                                            <i class="ace-icon fa fa-pencil bigger-120"></i>
                                                        </button>
                                                    
                                                        <button class="btn btn-xs btn-danger">
                                                            <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>

                                <!--分页-->
                                <div class="am-u-sm-12 am-u-end base-ad">
                                    <ul class="am-pagination am-pagination-centered" id="page">
                                        <li class="am-disabled"></li>
                                    </ul>
                                </div>
                            </div>

                            <!-- 添加权限表单 -->
                            <div class="modal fade" id="addAclModuleForm" tabindex="-1" role="dialog" aria-labelledby="AclModuleFormLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="addAclModuleFormLabel">添加权限模块</h4>
                                        </div>
                                        <div class="modal-body">

                                            <form class="form-horizontal" role="form">

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        上级权限:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="selectSM">
                                                            <option value="0">所属上级权限</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>父级权限与否:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="isParent">
                                                            <option value="">是否是父级权限</option>
                                                            <option value="1">是</option>
                                                            <option value="0">不是</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>状态:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="status">
                                                            <option value="">请选择状态</option>
                                                            <option value="1">有效</option>
                                                            <option value="0">冻结</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>权限名称:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="addAclModuleName" required placeholder="请输入权限名称" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>顺序:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="addSeq" placeholder="请输入顺序" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        备注:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <textarea class="form-control" id="addRemark"></textarea>
                                                    </div>
                                                </div>
                                            </form>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary" id="add_acl_module_submit">立即提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 修改权限表单 -->
                            <div class="modal fade" id="modifyAclModuleForm" tabindex="-1" role="dialog" aria-labelledby="AclModuleFormLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="modifyAclModuleFormLabel">修改权限模块</h4>
                                        </div>
                                        <div class="modal-body">

                                            <form class="form-horizontal" role="form">

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        上级权限:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="selectParent">
                                                            <option value="0">所属上级权限</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>父级权限与否:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="modifyIsParent">
                                                            <option value="">是否是父级权限</option>
                                                            <option value="1">是</option>
                                                            <option value="0">不是</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>状态:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="modifyStatus">
                                                            <option value="">请选择状态</option>
                                                            <option value="1">有效</option>
                                                            <option value="0">冻结</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>权限名称:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="modifyAclModuleName" required placeholder="请输入权限名称" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>顺序:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="modifySeq" placeholder="请输入顺序" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        备注:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <textarea class="form-control" id="modifyRemark"></textarea>
                                                    </div>
                                                </div>
                                            </form>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary" id="modify_acl_module_submit">立即提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 添加权限点表单 -->
                            <div class="modal fade" id="addAclForm" tabindex="-1" role="dialog" aria-labelledby="AclFormLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="addAclFormFormLabel">添加权限点</h4>
                                        </div>
                                        <div class="modal-body">

                                            <form class="form-horizontal" role="form">

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>权限模块:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="addSelectAcl">
                                                            <option value="0">所属权限模块</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>父节点:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="addParentId">
                                                            <option value="">选择父节点</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>类型:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="addType">
                                                            <option value="">权限类型</option>
                                                            <option value="1">菜单</option>
                                                            <option value="2">按钮</option>
                                                            <option value="2">其他</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>状态:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="addAclStatus">
                                                            <option value="">请选择状态</option>
                                                            <option value="1">有效</option>
                                                            <option value="0">冻结</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>权限名称:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="addAclName" required placeholder="请输入权限名称" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        URL:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="addURL" placeholder="请输入URL" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>顺序:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="addAclSeq" required placeholder="请输入顺序" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        备注:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <textarea class="form-control" id="addAclRemark"></textarea>
                                                    </div>
                                                </div>
                                            </form>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary" id="add_acl_submit">立即提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 修改权限点表单 -->
                            <div class="modal fade" id="modifyAclForm" tabindex="-1" role="dialog" aria-labelledby="AclFormLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="modifyAclFormLabel">修改权限点</h4>
                                        </div>
                                        <div class="modal-body">

                                            <form class="form-horizontal" role="form">

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>权限模块:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="modifySelectAcl">
                                                            <option value="0">所属权限模块</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>父节点:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="modifyParentId">
                                                            <option value="">选择父节点</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>类型:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="modifyType">
                                                            <option value="">权限类型</option>
                                                            <option value="1">菜单</option>
                                                            <option value="2">按钮</option>
                                                            <option value="2">其他</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>状态:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <select class="form-control" id="modifyAclStatus">
                                                            <option value="">请选择状态</option>
                                                            <option value="1">有效</option>
                                                            <option value="0">冻结</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>权限名称:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="modifyAclName" required placeholder="请输入权限名称" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        URL:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="modifyURL" placeholder="请输入URL" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        <span style="color: red;">*</span>顺序:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <input type="text" id="modifyAclSeq" required placeholder="请输入顺序" class="col-sm-12" />
                                                    </div>
                                                </div>

                                                <div class="form-group">

                                                    <label class="col-sm-4 control-label no-padding-right">
                                                        备注:
                                                    </label>

                                                    <div class="col-sm-5">
                                                        <textarea class="form-control" id="modifyAclRemark"></textarea>
                                                    </div>
                                                </div>
                                            </form>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary" id="modify_acl_submit">立即提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/lib/ace/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
            <script src="/lib/ace/js/jquery-1.11.3.min.js"></script>
        <![endif]-->

		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/lib/ace/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="/lib/ace/js/bootstrap.min.js"></script>
        <script src="/lib/mustache/mustache.min.js"></script>
		<!-- page specific plugin scripts -->

        <!-- easyui-->
        <script src="/lib/easyui/jquery.easyui.min.js"></script>

		<!-- ace scripts -->
		<script src="/lib/ace/js/ace-elements.min.js"></script>
        <script src="/lib/ace/js/ace.min.js"></script>

        <!--vue-->
        <script src="/lib/vue/vue.js"></script>

        <!--bootstrap分页-->
        <script src="/lib/bootstrap/js/bootstrap-paginator.js"></script>

        <!-- 自己 js -->
        <script src="/js/permission.js"></script>

        <script id="aclModuleListTemplate" type="x-tmpl-mustache">
            <ol class="dd-list ">
                {{#aclModuleList}}
                    <li class="dd-item dd2-item aclModule-name {{displayClass}}" id="aclModule_{{id}}" href="javascript:void(0)" data-id="{{id}}">
                        <div class="dd2-content" style="cursor:pointer;">
                        {{name}}
                        &nbsp;
                        <a class="{{#showDownAngle}}{{/showDownAngle}}" href="#" data-id="{{id}}" >
                           <span class="glyphicon glyphicon-menu-down" name="sub-aclModule" style="color: green"></span>
                        </a>
                        <span style="float:right;">
                            <a href="#" data-id="{{id}}" data-toggle="modal" data-target="#modifyAclModuleForm">
                                <span class="glyphicon glyphicon-pencil" style="color: green"></span>
                            </a>
                            &nbsp;
                            <a href="#" data-id="{{id}}" data-name="{{name}}">
                                <span class="glyphicon glyphicon-trash" style="color: red"></span>
                            </a>
                        </span>
                        </div>
                    </li>
                {{/aclModuleList}}
            </ol>
        </script>
        <script type="text/javascript">
            $(function() {

                var aclModuleList; // 存储树形权限模块列表
                var aclModuleListMap = {}; // 存储map格式权限模块信息

                var aclModuleListTemplate = $('#aclModuleListTemplate').html();
                Mustache.parse(aclModuleListTemplate);

                loadCategory();

                function loadCategory() {
                    $.ajax({
                        url: "/aclModule/tree",
                        success : function (res) {
                            if (res.length > 0){
                                aclModuleList = res;
                                var rendered = Mustache.render(aclModuleListTemplate, {
                                    aclModuleList: res,
                                    "showDownAngle": function () {
                                        return function (text, render) {
                                            return (this.aclModuleList && this.aclModuleList.length > 0) ? "" : "hidden";
                                        }
                                    },
                                    "displayClass": function () {
                                        return "";
                                    }
                                });

                                $("#aclModuleList").html(rendered);
                                recursiveRenderCategory(res);
                                bindCategoryClick();
                            }
                        }
                    })
                }

                //递归渲染商品分类树
                function recursiveRenderCategory(aclModuleList) {
                    if (aclModuleList.length > 0) {
                        $(aclModuleList).each(function (i, aclModule) {
                            aclModuleListMap[aclModule.id] = aclModule;
                            if (aclModule.aclModuleList.length > 0) {
                                var rendered = Mustache.render(aclModuleListTemplate, {
                                    aclModuleList: aclModule.aclModuleList,
                                    "showDownAngle": function () {
                                        return function (text, render) {
                                            return (this.aclModuleList && this.aclModuleList.length > 0) ? "" : "hidden";
                                        }
                                    },
                                    "displayClass": function () {
                                        return "hidden";
                                    }
                                });
                                $("#aclModule_" + aclModule.id).append(rendered);
                                recursiveRenderCategory(aclModule.aclModuleList);
                            }
                        })
                    }
                }


                function bindCategoryClick() {
                    $("[name='sub-aclModule']").on('click', function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        $(this).parent().parent().parent().children().children(".aclModule-name").toggleClass("hidden");
                        if($(this).is(".glyphicon-menu-down")) {
                            $(this).removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
                        } else{
                            $(this).removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
                        }
                    });

                }
            });
        </script>
        <script type="text/javascript">
            load();
            function load() {
                $.ajax({
                    url: "acl/getSelectAclParent",
                    type: "post",
                    success: function (res) {

                        for (var i=0; i<res.length; i++){
                            $("#addParentId").append("<option value='"+ res[i].id +"'>"+res[i].name+"</option>");

                        }
                    }
                });
            }
        </script>
	</body>
</html>
